import React from 'react'
// API
import {GetCode,Register} from '../../api/account'
// 加密
import CryptoJs from 'crypto-js'
import qs from 'qs'
// 验证码组件
import Code from '../../components/code' 
import { Form, Input, Button,message,Col,Row } from 'antd';

const layout = {
    labelCol: {
    span: 8,
    },
    wrapperCol: {
    span: 16,
    },
}
const tailLayout = {
    wrapperCol: {
    offset: 8,
    span: 16,
    },
}
// 定时器
let timer = null;

class  RegisterForm extends React.Component{
    state={
      username: "",
      password: "",
      captcha: "",
      buttonContent:'获取验证码',
      buttonDisabled:false,
      buttonLoading:false,
      buttonStatus:false,
      RegisterButtonStatus:true
    }
    componentWillUnmount(){
      clearInterval(timer)
    }
    RegisterButton=()=>{
      this.setState({RegisterButtonStatus:false})
    }
     // 提交按钮执行发送请求
     onFinish=()=>{
      const requestData = {
        username:this.username.state.value,
        password:CryptoJs.MD5(this.password.state.value).toString(),
        captcha:this.captcha.state.value
      }
      // 引入qs对数据进行处理 用Qs.stringify()将对象序列化成URL的形式
      // 查原因才知道axios会把post请求中的参数，会转换包装成一个json来传递
      // 通过查看axios网络请求的header可以看出Content-Type是 application/json;charset=UTF-8
      // 而服务器接收的Content-Type是application/x-www-form-urlencoded
      Register(requestData).then(response=>{
          console.log(response)
          let rescode = response.data
          if( rescode == 200){
            message.success('注册成功')
            this.props.switchForm()
          }else if(rescode == 201)
          message.warn('用户名已存在')
          else
          message.warn('验证码不正确')
         
      }).catch(err=>{console.log(err);message.warning('账户名已存在，请重试')})
    }

    render(){
    return (
    <Form  {...layout} name="basic" onFinish={this.onFinish} initialValues={{remember: true,}}>
      <Form.Item label="邮箱用户名" name="username" rules={[{required: true,message: '请输入邮箱用户名',},]}>
        <Col span={19}>
        <Input ref={username=>this.username=username} placeholder="设置邮箱用户名"/>
        </Col>
      </Form.Item>

      <Form.Item name="password" label="设置密码" rules={[{required: true,message: '密码格式不正确',len:6},]} hasFeedback >
      <Col span={19}>
        <Input.Password placeholder="设置字母加数字的密码"/>
        </Col>
      </Form.Item>

      <Form.Item name="confirm" label="确认密码" dependencies={['password']} hasFeedback
        rules={[{required: true,message: '两次密码输入不一致',len:6},
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue('password') === value) {
                return Promise.resolve();
              }
              return Promise.reject();
            },
          }),
        ]}
      >
        <Col span={19}>
            <Input.Password  ref={password=>this.password=password} placeholder="重复密码" />
        </Col>
      </Form.Item>

    
      <Form.Item label="验证码" name="captcha"  >
        <Row gutter={8}>
          <Col span={12}>
            <Form.Item name="captcha" noStyle rules={[{ required: true, message: '验证码输入有误',}]}>
              <Input ref={captcha=>this.captcha=captcha} placeholder="请输入验证码"/>
            </Form.Item>
          </Col>
          <Col span={12}>
            <Code ref="changeButtonStatus" username={()=>(this.username.state.value)} RegisterButton={this.RegisterButton}/>
          </Col>
        </Row>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit" disabled={this.state.RegisterButtonStatus} >
        注册
        </Button>
      </Form.Item>
    </Form>
  )
}
}

export default RegisterForm